<template>
  <view
    style="background-color: #fff; padding-top: 1upx; padding-bottom: 10rpx"
    class="bd"
  >
    <view
      style="
        padding: 30upx;
        background-color: #fff;
        font-size: 36upx;
        font-weight: 900;
        color: #555;
        margin: 2upx 0 20upx;
      "
      class="bd1 t1"
      >{{ detail.vaccinesName }}</view
    >
    <view class="title">
      <text class="txt">疫苗分类</text>
    </view>
    <view class="art">{{ detail.vaccinesType == "1" ? "免费" : "自费" }}</view>
    <view class="title">
      <text class="txt">预防疾病</text>
    </view>
    <view class="art">{{ detail.diseasePrevention || "暂无数据" }}</view>
    <view class="title">
      <text class="txt">接种对象以及时间</text>
    </view>
    <view class="art">{{ detail.recommend || "暂无数据" }}</view>
    <view class="title">
      <text class="txt">注意事项</text>
    </view>
    <view class="art" v-html="detail.tips || '暂无数据'"></view>
    <view
      class="storeBtn"
      style="margin: 80upx 0; text-align: center"
      v-if="
        detail.vaccinesType == '2' && details.types == '0' && nostockstate == 0
      "
    >
      <!-- <u-button type="primary" size="medium" style="background: #F4D233;" 
				@tap="isShowTips=true">{{detail.types==0?'无库存':'库存不足'}}</u-button> -->
      <u-button
        type="primary"
        size="medium"
        style="background: #f4d233"
        @tap="isShowTips = true"
        >无库存</u-button
      >
      <view
        v-if="details.types == 0"
        style="
          text-align: center;
          color: #007aff;
          padding: 10upx;
          box-shadow: 0 0 10upx 0 #ccc;
          width: 50%;
          margin: 10upx auto 0;
        "
      >
        请点击上方按钮查看其它社区该疫苗库存情况</view
      >
      <view class="tips" v-if="isShowTips">
        当前该疫苗库存不足，此预约无法保证疫苗接种，请提前电话联系所属社区，
        询问疫苗库存情况或替代方案，社区联系方式详见健康管理页面社区简介-->
        <text style="color: #007aff" @tap="goHealth">点此跳转</text>
        <view class="flex" style="margin: 30upx 0 0">
          <u-button type="primary" size="mini" @tap="goCommunity"
            >查看库存</u-button
          >
          <u-button type="" size="mini" @tap="isShowTips = false"
            >取消</u-button
          >
        </view>
      </view>
      <u-button
        type="primary"
        size="medium"
        v-if="detail.adequate == 2"
        style="background: #24d5ea; margin-top: 20upx"
        @click="yyuedj"
        >需求登记</u-button
      >
    </view>
    <view v-show="details.types == '1'">
      <view
        style="margin: 80upx 20upx"
        v-if="detail.vaccinesType == '2' && details.types == '1' && state != 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <u-button
          style="background-color: rgb(24, 199, 225); color: rgb(255, 255, 255)"
          @click="goCalendar()"
        >
          预约
        </u-button>
      </view>
      <view
        style="margin: 80upx 20upx"
        v-if="detail.vaccinesType == '2' && state == 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <!-- 			<u-button  style="background-color: rgb(166, 166, 166);
		color: rgb(255, 255, 255);" disabled>
					已预约
			</u-button> -->
      </view>
    </view>
    <view v-show="details.types == '0'">
      <view
        style="margin: 80upx 20upx"
        v-if="
          detail.vaccinesType == '2' &&
          details.types == '0' &&
          state != 1 &&
          nostockstate == 1
        "
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <u-button
          style="background-color: rgb(24, 199, 225); color: rgb(255, 255, 255)"
          @click="goCalendar()"
        >
          预约
        </u-button>
      </view>
      <view
        style="margin: 80upx 20upx"
        v-if="detail.vaccinesType == '2' && state == 1"
      >
        <!-- 	<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button> -->
        <!-- 			<u-button  style="background-color: rgb(166, 166, 166);
		color: rgb(255, 255, 255);" disabled>
					已预约
			</u-button> -->
      </view>
    </view>
    <!-- <view style="margin: 80upx 20upx;" v-if="detail.vaccinesType=='2' && details.types=='1' && state==1 || nostockstate==1">
			<u-button  style="background-color: rgb(204, 204, 204);
			color: rgb(255, 255, 255);" @click="goCalendar()" :disabled="true">
						您已有预约的接种计划
				</u-button>
		</view> -->
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      title="确认登记信息"
      :async-close="true"
      :show-cancel-button="true"
    >
      <view style="padding: 25upx">
        <view>预约门诊：{{ sq }}</view>
        <view>登记疫苗：{{ detail.vaccinesName }}</view>
        <view>需求登记须知：</view>
        <view style="font-size: 26rpx; color: #434343; line-height: 48rpx"
          >①请注意查看预约门诊所发布的可预约通知信息 <br />
          ②门诊发布可预约通知后，请及时在效期内预约，避免超期无法预约<br />
          ③如超期无法预约，请重新需求登记排队 <br
        /></view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      planid: "",
      vid: "",
      detail: {},
      id: "",
      details: {},
      state: "",
      isShowTips: false,
      vtype: "",
      vPid: "",
      sq: "",
      showConfirm: false, //弹框默认
      nostockstate: "", //二类苗无库存已通知预约
    };
  },
  onLoad(options) {
    this.planid = options.planid;
    this.vid = options.vid;
    this.vtype = options.vtype;
    this.sqname = options.sq || this.$store.state.sqname;
    this.vPid = options.vPid ? options.vPid : "";
    this.getPlanDetail();
    this.getPlanDetails();
    this.goCalendar2();
    this.getUniIntro();
    this.goDatas();
  },
  onShow() {
    this.getPlanDetail();
    this.getPlanDetails();
    this.goCalendar2();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    goHealth() {
      uni.switchTab({
        url: "/pages/health/health",
      });
    },
    goDatas() {
      this.config
        .get("/appointment/erClassVaccNoStock", {
          vid: this.vid,
          planId: this.planid,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.nostockstate = res.data.data.state;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/oldInfo/getVaccinesBasicsOldInfo", {
          planId: this.planid,
          vid: this.vid,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
            this.id = self.detail.id;
            //console.log(self.detail)
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    getPlanDetails() {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/vaccinesBasicsInfo/findById", { vaccinesId: self.vid })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.details = res.data.data;
            //console.log(self.details)
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    goCalendar2() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 8,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              this.state = 2;
            } else {
              this.state = 1;
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    yyue(item) {
      uni.navigateTo({
        url: "/pages/main/old/calendar?id=" + this.vid,
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    //去预约登记
    yyuedj() {
      // this.showConfirm = true
      this.config
        .post("/appointment/appointmentRegistrations", {
          vid: this.vid,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            if (res.data.msg == 1) {
              this.showConfirm = true;
            } else {
              uni.showToast({
                title: "你已登记该疫苗，请勿重复操作",
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
            this.showConfirm = false;
          }
        });
    },
    confirm() {
      //弹框的确认
      let self = this;
      this.config
        .post("/appointment/appointmentRegistration", {
          vid: this.vid,
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: res.data.msg,
            });
            setTimeout((s) => {
              uni.navigateBack();
            }, 500);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
            this.showConfirm = false;
          }
        });
    },
    getUniIntro() {
      let self = this;
      this.config.post("/communityInfo/getCommunityDetail", {}).then((res) => {
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
          if (uni.getStorageSync("community")) {
            self.uniDetail = JSON.parse(uni.getStorageSync("community"));
          } else {
            self.uniDetail = res.data.data;
            uni.setStorageSync("community", JSON.stringify(res.data.data));
          }
        } else {
          uni.showToast({
            title: self.config.handleError(res.data),
            icon: "none",
          });
        }
      });
    },
    goCommunity() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/community-list?vid=" + this.vid,
      });
    },
    goCalendar() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 8,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              uni.navigateTo({
                url:
                  "/pages/main/child/backlog/calendar?type=8&name=预约接种&sq=" +
                  this.sq +
                  "&planid=" +
                  this.planid +
                  "&vtype=" +
                  this.vtype +
                  "&vid=" +
                  this.vid +
                  "&vPid=" +
                  this.vPid,
              });
            } else {
              uni.showToast({
                title: "你已预约接种，请勿重复预约",
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;
  .inp-title {
    width: 200upx;
  }
}
.storeBtn {
  position: relative;
  .tips {
    position: absolute;
    bottom: 100%;
    width: 500upx;
    left: 50%;
    margin: 0 0 10upx -250upx;
    color: #333;
    padding: 40upx 40upx;
    box-shadow: 0 0 10upx 0 #999;
    background-color: #fff;
    border-radius: 10upx;
    text-align: left;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;
  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}
.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .title {
    background-color: #000000 !important;
    color: #ccc !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .art {
    color: #ccc !important;
  }
  >>> span {
    color: #ccc !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>